<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用编辑器</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Vue Grid Layout -->
    <link rel="stylesheet" href="https://unpkg.com/vue-grid-layout/dist/style.css">
    <!-- Monaco Editor -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
    <script>
        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs' }});
    </script>
</head>
<body>
    <div id="app">
        <div class="editor-container">
            <div class="editor-header">
                <h1>应用编辑器</h1>
                <div class="editor-actions">
                    <button @click="saveContent" class="save-btn">保存</button>
                    <button @click="preview" class="preview-btn">预览</button>
                </div>
            </div>
            
            <div class="editor-content">
                <div class="editor-sidebar">
                    <div class="component-list">
                        <h3>组件</h3>
                        <div v-for="comp in components" 
                             :key="comp.type"
                             class="component-item"
                             draggable="true"
                             @dragstart="onDragStart($event, comp)">
                            {{ comp.label }}
                        </div>
                    </div>
                </div>
                
                <div class="editor-main">
                    <div class="editor-tabs">
                        <button :class="['tab-btn', { active: currentTab === 'visual' }]"
                                @click="currentTab = 'visual'">
                            可视化编辑
                        </button>
                        <button :class="['tab-btn', { active: currentTab === 'code' }]"
                                @click="currentTab = 'code'">
                            代码编辑
                        </button>
                        <button :class="['tab-btn', { active: currentTab === 'preview' }]"
                                @click="currentTab = 'preview'">
                            预览
                        </button>
                    </div>
                    
                    <div class="tab-content" v-show="currentTab === 'visual'">
                        <vue-grid-layout
                            :layout="layout"
                            :col-num="12"
                            :row-height="30"
                            :is-draggable="true"
                            :is-resizable="true"
                            @layout-updated="onLayoutUpdated">
                            <grid-item v-for="item in layout"
                                     :key="item.i"
                                     :x="item.x"
                                     :y="item.y"
                                     :w="item.w"
                                     :h="item.h">
                                <component :is="item.component"
                                         v-bind="item.props"
                                         v-on="item.events">
                                </component>
                            </grid-item>
                        </vue-grid-layout>
                    </div>
                    
                    <div class="tab-content" v-show="currentTab === 'code'">
                        <div class="code-editor">
                            <div class="editor-tabs">
                                <button :class="['editor-tab', { active: currentFile === 'template' }]"
                                        @click="currentFile = 'template'">
                                    模板
                                </button>
                                <button :class="['editor-tab', { active: currentFile === 'script' }]"
                                        @click="currentFile = 'script'">
                                    脚本
                                </button>
                                <button :class="['editor-tab', { active: currentFile === 'style' }]"
                                        @click="currentFile = 'style'">
                                    样式
                                </button>
                            </div>
                            <div id="monaco-editor" class="editor-content"></div>
                        </div>
                    </div>
                    
                    <div class="tab-content" v-show="currentTab === 'preview'">
                        <div class="preview-container" ref="previewContainer"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- Vue Grid Layout -->
    <script src="https://unpkg.com/vue-grid-layout"></script>
    <!-- 编辑器脚本 -->
    <script src="editor.js"></script>
</body>
</html> 